<div class="bar-wrapper">
    <div *ngIf="stopped" class="bar-state">
       <span class="label">{{'VULNERABILITY.STATE.STOPPED' | translate}}</span>
    </div>
    <div *ngIf="queued" class="bar-state">
        <span class="label label-orange">{{'VULNERABILITY.STATE.QUEUED' | translate}}</span>
    </div>
    <div *ngIf="error" class="bar-state bar-state-error">
        <a href="javascript:void(0);" class="error-text" (click)="viewLog()">
            <clr-icon shape="error" class="is-error" size="24"></clr-icon>
            {{'VULNERABILITY.STATE.ERROR' | translate}}
        </a>
    </div>
    <div *ngIf="scanning" class="bar-state bar-state-chart">
        <div>{{'VULNERABILITY.STATE.SCANNING' | translate}}</div>
        <div class="progress loop" style="height:2px;"><progress></progress></div>
    </div>
    <div *ngIf="completed" class="bar-state bar-state-chart">
        <hbr-vulnerability-summary-chart [summary]="summary"></hbr-vulnerability-summary-chart>
    </div>
    <div *ngIf="unknown" class="bar-state">
        <clr-icon shape="warning" class="is-warning" size="24"></clr-icon>
        <span style="margin-left:-5px;">{{'VULNERABILITY.STATE.UNKNOWN' | translate}}</span>
    </div>
    <job-log-viewer #scanningLogViewer [jobType]="'scan'"></job-log-viewer>
</div>